<template>
	<view>
		<view class="tipsBox">
			根据监管要求，请您在购买产品前完善个人信息。该信息仅用于在本平台购买金融机构发行的金融产品或服务，我们将严格保密您的个人信息
		</view>
		<view class="informationBox">
			<view class="informationBox1">
				联系方式(必填)
			</view>
			<view class="informationBox2">
				<view class="informationBox-2">
					详细地址
				</view>
				<input type="text" value="" placeholder="路/街+门牌号,例南京路888号" />
			</view>
			<view class="informationBox2">
				<view class="informationBox-2">
					邮箱地址
				</view>
				<input type="text" value="" placeholder="用于接收电子保单和年度账单" />
			</view>
		</view>
		<view class="informationCase">
			<view class="informationCase1">
				<view class="informationCase-1">
					职业类型
				</view>
				<input type="text" value="" placeholder="一般工作人员" />
			</view>
			<view class="informationCase1">
				<view class="informationCase-1">
					工作地区
				</view>
				<view>
					<input type="text" value="" placeholder="成都" />
					<input type="text" value="" placeholder="成都市双流区" />
				</view>
			</view>
		</view>
		<view class="confirmBox">
			<button type="default" @click="open">确定</button>
			<uni-popup ref="popup" type="bottom">
				<view class="popupBox">
					<view class="popupBox1">
						<view class="popupBox11">
							详细地址填写规范
						</view>
						<view style="margin-top: 50rpx;">
							<view class="popupBox12">
								· 无需包含“省/市/区/自治区/自治州/直辖市”
							</view>
							<view class="popupBox12">
								· 需包含“路/街/村/组/号/院/厦/楼/广场”其中之一
							</view>
						</view>
						<view class="popupBox13">
							如： 樱花路66号
						</view>
					</view>
					<button class="popupBox-1" @click="close">
						我知道了
					</button>

				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('button')
			},
			close() {
				this.$refs.popup.close()
				uni.reLaunch({
					url:'/pages/ConfirmPurchase/ConfirmPurchase'
				})
			}
		}
	}
</script>

<style>
	.tipsBox {
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;
		padding: 40rpx;
		background-color: #f3f3f3;
		padding-bottom: 60rpx;
	}

	.informationBox {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.informationBox .informationBox1 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #F0F0F0;
		font-size: 28rpx;
		color: #3333333;
	}

	.informationBox .informationBox2 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #F0F0F0;
		font-size: 28rpx;
		color: #333333;
		display: flex;
	}

	.informationBox .informationBox2 input {
		margin-left: 20rpx;
	}

	.informationCase {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.informationCase .informationCase1 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #F0F0F0;
		font-size: 28rpx;
		color: #999999;
		display: flex;
	}

	.informationCase .informationCase1 input {
		margin-left: 20rpx;
	}

	.confirmBox {
		background-color: #f3f3f3;
		padding: 40rpx;
		padding-top: 440rpx;
		padding-bottom: 60rpx;
	}

	.confirmBox button {
		height: 88rpx;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 28rpx;
		background-color: #3476f1;
		border-radius: 4rpx;
	}

	.popupBox {
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.popupBox .popupBox1 {
		padding: 40rpx;
	}

	.popupBox .popupBox1 .popupBox11 {
		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}

	.popupBox .popupBox1 .popupBox12 {
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.popupBox .popupBox1 .popupBox13 {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #ff7846;
	}

	.popupBox .popupBox-1 {
		height: 88rpx;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 28rpx;
		background-color: #3476f1;
		border-radius: 4rpx;
		text-align: center;
	}
</style>
